<template>
	<view>
		<search></search>
		<view class="content">
			<scroll-view scroll-y="true" class="left">
				<view v-for="item,index in list" :key="index" :class="{active:checkIndex==index}" @click="qie(index)">
					{{item.cat_name}}
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="rig">
				<view class="item-it" v-for="(item,index) in rightList" :key="index">
					<view class="title">{{item.cat_name}}</view>
					<uni-grid :column="3" :highlight="true">
						<uni-grid-item v-for="(n, i) in item.children" :key="i">
							<view class="grid-item-box" @tap="jump(n.cat_id)">
								<image :src="n.cat_icon" mode="widthFix"></image>
								<view>{{n.cat_name}}</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import search from '../../componentas/search/search.vue'
	import api from '../../utils/api.js'
	export default {
		components: {
			search
		},
		data() {
			return {
				list: [],
				checkIndex: 0,
				rightList: []
			};
		},
		onLoad() {
			api.get('categories').then(res => {
				// console.log(res);
				this.list = res.message
				this.rightList = this.list[0].children
			})
		},
		methods: {
			qie(i) {
				this.checkIndex = i
				this.rightList = this.list[i].children
			},
			jump(id){
				// console.log(id);
				uni.navigateTo({
					url:'/pages/shopList/shopList?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		height: calc(100vh - 100rpx);
		display: flex;

		.left {
			width: 160rpx;
			height: 100%;
			background-color: #f7f8fa;

			view {
				height: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				border-left: 6rpx solid transparent;
			}

			.active {
				border-color: red;
				background-color: #fff;
				color: red;
			}
		}

		.rig {
			flex: 1;

			.title {
				line-height: 100rpx;
				text-align: center;
				border-bottom: 2rpx solid #ccc;
			}

			image {
				width: 70%;
			}

			.grid-item-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

		}
	}
</style>
